<template>
	<view>
		<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="TabCur" @change="tabChange" tab-class="text-center text-black bg-white"
		 select-class="text-blue" style="font-size: 30upx;position: fixed;width: 100vw;"></wuc-tab>
		<view class="scroll_cont">
			<s-pull-scroll ref="pullScroll" :fixed="true" top="100" :pullDown="pullDown" :pullUp="loadData" finishText="我也是有底线的">
				<view v-for="(itemTwo, indexTwo) in goodsList" :key="indexTwo" class="list" @tap="openYesPayInvest(itemTwo.uuniId)">
					<view class="list_cont">
						<view class="clearfix list_title">
							<view class="fl">{{ itemTwo.uuniDate }}</view>
							<view class="fr" v-if="itemTwo.uuniSuccess == 1">已成交</view>
							<view class="fr" v-else-if="itemTwo.uuniPay == 1">待收款</view>
							<view class="fr" v-else>待付款</view>
						</view>

						<view class="clearfix list_cont_wrap">
							<view class="list_cont_wrap_l">
								<image :src="itemTwo.buyuser == null ? '' :  itemTwo.buyuser.headpic" mode="" style="width: 100%;height: 138upx;"></image>
							</view>
							<view class="list_cont_wrap_r">
								<view class="clearfix">
									<text>{{ itemTwo.buyuser == null ? '' : itemTwo.buyuser.user_name }}</text>
									<text class="list_gclass">{{ itemTwo.uuniPayDate }}</text>
									<text class="list_gprice">{{ itemTwo.uuniJiner }}</text>
								</view>
								<view class="list_detail">收款遇到问题，请联系系统管理员</view>
								<view class="clearfix list_last">
									<text class="list_skill">{{itemTwo.buyuser == null ? '' :  itemTwo.buyuser.mobile }}</text>
									<text class="list_collect"></text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="no" v-if="!(goodsList.length>0)">
					<view class="none">
						<img src="@/imgs/none.png"></img>
						<view>暂无数据</view>
					</view>
				</view> -->
				<!-- <view class="no" v-if="!isloading && page_index>=total_page">
					<view class="none">
						<view>我也是有底线的</view>
					</view>
				</view> -->
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import sPullScroll from '@/components/s-pull-scroll/index.vue';
	import bussiness from '../../static/dataJson/bussiness.json';
	export default {
		data() {
			return {
				TabCur: 0,
				swiperHeight: 0, //外部的高度
				tabList: bussiness.receivablestabList,
				goodsList: [{
					buyuser: {},
				}],

				id: ''
			};
		},
		components: {
			WucTab,
			sPullScroll
		},
		onLoad(e) {
			if (e.id) this.id = e.id;
		},
		mounted() {

			this.refresh();

			var _self = this;
			uni.$on('yespay', function(e) {
				//监听刷新列表
				_self.refresh();
			});
		},
		methods: {
			tabChange: function(index) {
				this.refresh();
			},
			refresh: function() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown: function(pullScroll) {


				this.getListData(this.TabCur, pullScroll);

			},
			loadData: function(pullScroll) {

				this.getListData(this.TabCur, pullScroll);

			},
			getListData: function(tab, pullScroll) {
				//mode 1代表下一页 0代表刷新
				//console.log(pullScroll.page);

				if (pullScroll.page == 1) {
					this.goodsList = [];
				}


				if (tab == 0) {
					this.$api.http
						.get('assistance/tradinghall/unpay_invest_lists', {
							page: pullScroll.page,
							id: this.id
						})
						.then(res => {
							this.callbackapi(res.data, pullScroll);
							pullScroll.success();
						});
				} else if (tab == 1) {
					this.$api.http
						.get('assistance/tradinghall/unpay_invest_lists', {
							page: pullScroll.page,
							success: 0,
							id: this.id

						})
						.then(res => {
							this.callbackapi(res.data, pullScroll);
							pullScroll.success();
						});
				} else {
					this.$api.http
						.get('assistance/tradinghall/unpay_invest_lists', {
							page: pullScroll.page,
							success: 1,
							id: this.id
						})
						.then(res => {
							this.callbackapi(res.data, pullScroll);
							pullScroll.success();
						});
				}
			},
			callbackapi: function(data, pullScroll) {
				for (var i = 0; i < data.length; i++) {
					this.goodsList.push(data[i]);
				}

				if (data.length == 0) {
					if (pullScroll.page == 1) {

						pullScroll.empty();
					} else {

						pullScroll.finish(true);
					}
				}
			},


			openYesPayInvest(id) {
				console.log('id', id);
				uni.navigateTo({
					url: 'yespayinvest?id=' + id
				});
			}

		}
	};
</script>

<style lang="scss">
	.clearfix {
		zoom: 1;
		display: block;
	}

	.clearfix:after {
		content: '.';
		visibility: hidden;
		display: block;
		height: 0;
		clear: both;
	}

	.text-blue {
		color: #5390e3;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	swiper {
		height: 100vh;
	}

	.scroll_cont {
		background-color: #f5f5f5;
		height: 100vh;

		.none {
			padding: 150px 0;
			text-align: center;
			color: #adadad;
			line-height: 50px;

			img {
				width: 60px;
				height: 60px;
			}
		}

		.list {
			background-color: #ffffff;

			.list_cont {
				padding: 20upx;
				margin-top: 10upx;

				.list_title {
					font-size: 28upx;
					color: #848484;
				}

				.list_cont_wrap {
					font-size: 32upx;
					border-top: 2upx solid #eeeeee;
					margin-top: 16upx;
					padding: 24upx 0;

					.list_cont_wrap_l {
						width: 20%;
						float: left;
					}

					.list_cont_wrap_r {
						float: right;
						width: 78%;
						margin-left: 2%;

						.list_gclass {
							font-size: 24upx;
							color: #848484;
							margin-left: 16upx;
							border-left: 2upx solid #eeeeee;
							padding-left: 16upx;
						}

						.list_gprice {
							color: #ef5d65;
							text-align: right;
							float: right;
						}

						.list_detail {
							font-size: 24upx;
							color: #848484;
							margin-top: 12upx;
						}

						.list_last {
							margin-top: 12upx;

							.list_skill {
								color: #4d4d4d;
								font-size: 24upx;
								background: #e8e8e8;
								padding: 6upx 12upx;
								border-radius: 5upx;
							}

							.list_collect {
								color: #848484;
								font-size: 24upx;
								float: right;
							}
						}
					}
				}
			}
		}
	}
</style>
